<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<LINK rel=stylesheet type=text/css href="../css/style.css">
<script type="text/javascript" src="dist/jquery/jquery-1.8.3.js"></script>
<html>
<head>
    <title>个人中心发布房屋信息管理</title>
</head>
<BODY>

<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV>
    <DIV class=search><LABEL class="ui-green searchs"><a href="fabu.htm" title="">发布房屋信息</a></LABEL>
        <LABEL class=ui-green><INPUT onclick='document.location="index.jsp"' value="退       出" type=button name=search></LABEL>
    </DIV></DIV>

<DIV id=navbar class=wrap>
    <DL class="search clearfix">
        <FORM id=sform>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=htitle>
                        <LABEL class=ui-blue><INPUT  value=搜索房屋 type=button onclick="click2HouseList()" ></LABEL>
                    </LI></UL></DT>
            <DD>
                <UL>
                    <LI class=first>每页记录数</LI>
                    <LI><SELECT name=maxRows>
                        <OPTION selected value="-1">所有</OPTION>
                        <OPTION value="3">每页3条</OPTION>
                        <OPTION value=5>每页5条</OPTION>
                        <OPTION value=10>每页10条</OPTION>
                        <OPTION value=15>每页15条</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>价格 </LI>
                    <LI><SELECT name=hprice>
                        <OPTION selected value="0-0">不限</OPTION>
                        <OPTION value=0-500>500元以下</OPTION>
                        <OPTION value=500-800>500元—800元</OPTION>
                        <OPTION value=800-8000>800元以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>面积 </LI>
                    <LI><SELECT name=hfloorage>
                        <OPTION selected value="0-0">不限</OPTION>
                        <OPTION value=0-90>90以下</OPTION>
                        <OPTION value=90-110>90-110</OPTION>
                        <OPTION value=110-1100>110以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>区位置</LI>
                    <LI><SELECT class=text name=street.district.did>
                        <%--<OPTION selected value=1004>海淀区</OPTION>--%>
                    </SELECT>
                    </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>街道位置</LI>
                    <LI><SELECT id=street name=street.sid>
                        <%--<OPTION selected value="">不限</OPTION>
                        <OPTION value=1000>知春路</OPTION>
                        <OPTION value=1001>中关村大街</OPTION>
                        <OPTION value=1002>学院路</OPTION>
                        <OPTION value=1003>朝阳路</OPTION>--%>
                    </SELECT> </LI></UL></DD>

            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI><SELECT name=type.tid>
                        <%-- <OPTION selected value="">不限</OPTION>
                         <OPTION value=1000>一室一厅</OPTION>
                         <OPTION value=1001>一室两厅</OPTION>
                         <OPTION value=1002>两室一厅</OPTION>
                         <OPTION value=1003>两室两厅</OPTION>--%>
                    </SELECT>
                    </LI></UL></DD>

        </FORM></DL></DIV>


<DIV class="main wrap">
    <DIV id=houseArea>
        <TABLE class=house-list>
            <TBODY>
            <TR>
                <TD class=house-thumb>
                    <SPAN>
                        <A href="details.jsp" target="_blank">
                            <img src="../images/thumb_house.gif" width="100" height="75" alt="">
                        </A>
                    </SPAN>
                </TD>
                <TD>
                    <DL>
                        <DT>
                            <A href="details.htm" target="_blank">123</A>
                        </DT>
                        <DD>海淀区中关村大街,123平米<BR>联系方式：123 </DD>
                    </DL>
                </TD>
                <TD class=house-type>
                    <LABEL class=ui-green>
                        <INPUT onclick=update(46) value="修    改" type=button name=search>
                    </LABEL>
                </TD>
                <TD class=house-price>
                    <LABEL class=ui-green>
                        <INPUT value="删    除" type=button name=search>
                    </LABEL>
                </TD>
            </TR>
            </TBODY>
        </TABLE>
    </DIV>


    <DIV class=pager>
        <UL>
            <LI><button name="firstPageNo" value="1" onclick="click2CurrPageNo('firstPageNo')">首页</button></LI>
            <LI><button name="prePageNo" value="6" onclick="click2CurrPageNo('prePageNo')">上一页</button></LI>
            <LI><button name="currPageNo" value="7" onclick="click2CurrPageNo('currPageNo')">当前页</button></LI>
            <LI><button name="nextPageNo" value="8" onclick="click2CurrPageNo('nextPageNo')">下一页</button></LI>
            <LI><button name="totalPages" value="10" onclick="click2CurrPageNo('totalPages')">末页</button></LI>
        </UL><SPAN
            class=total>0/0页</SPAN> </DIV></DIV>

</DIV>


<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD></DL></DIV>
</BODY>
</HTML>
<script type="text/javascript">

    /**方法2:
     *更新页码
     */
    function updatePages(paginationInfo){
        $("button[name=first]").attr('value',1);
        $("button[name=prePageNo]").attr('value',paginationInfo.prePageNo);
        $("button[name=currPageNo]").attr('value',paginationInfo.currPageNo);
        $("button[name=nextPageNo]").attr('value',paginationInfo.nextPageNo);
        $("button[name=totalPages]").attr('value',paginationInfo.totalPages);
        $(".total").html(paginationInfo.currPageNo+'/'+paginationInfo.totalPages);
        $("button[name=currPageNo]").html('第 '+paginationInfo.currPageNo+' 页');
    }

    /**方法2:
     *获取当前页数
     */
    var getCurrPageNoName='';
    var finalCurrPageNo=-1;
    function click2CurrPageNo(getCurrPageNoName){
        console.log('777点击翻页按钮的点击事件');
        if ($("button[name="+getCurrPageNoName+"]").val()>0){
            finalCurrPageNo=$("button[name="+getCurrPageNoName+"]").val();
        }
        invokeAjax2houseList();
    }

    /**
     * 方法1:返回结果houseList
     */
    function click2HouseList(){
        console.log('666点击搜索按钮button的点击事件');
        finalCurrPageNo=1;
        invokeAjax2houseList();
    }

    /**方法0:
     *根据mid查询对应的依法不得房屋信息列表
     */
    houseListByMember();
    function houseListByMember(){
        console.log('888页面加载时直接异步查询houseListByMember()');
        mid2session=2;
        finalCurrPageNo=1;
        invokeAjax2houseList();
    }

    /**
     * 自定义异步查询模块组件,获取当前的结果JSON数据集
     */
    function invokeAjax2houseList(){
        console.log('555调用了invokeAjax2houseList()函数');
        console.log('传入参数核查=======START==========');
        console.log('$("input[name=htitle]").val()========'+$("input[name=htitle]").val());
        console.log('$("select[name=hprice]").val()========'+$("select[name=hprice]").val());
        console.log('$("select[name=hfloorage]").val()========'+$("select[name=hfloorage]").val());
        console.log('$("select[name=street.district.did]").val()========'+$("select[name='street.district.did']").val());
        console.log('$("select[name=street.sid]").val()========'+$("select[name='street.sid']").val());
        console.log('$("select[name=type.tid]").val()========'+$("select[name='type.tid']").val());
        console.log('getCurrPageNo========'+finalCurrPageNo);
        console.log('$("select[name=maxRows]").val()========'+$("select[name=maxRows]").val());
        console.log('传入参数核查========END=========');

        $.ajax({
            type:'post',
            url:'house!houseList.action',
            data:{
                htitle:$("input[name=htitle]").val(),
                hprice_range:$("select[name=hprice]").val(),
                hfloorage_range:$("select[name=hfloorage]").val(),
                street_district_did:$("select[name='street.district.did']").val(),
                street_sid:$("select[name='street.sid']").val(),
                type_tid:$("select[name='type.tid']").val(),
                currPageNo:finalCurrPageNo,
                maxRows:$("select[name=maxRows]").val(),
                member_mid:mid2session,
            },
            dataType:'json',
            success:function (data) {
                console.log('555调用异步查询invokeAjax2houseList');
                console.log(data);
                console.log(data.houseList);
                console.log(data.pagination);

                var data1=data.houseList;
                //更新页码
                updatePages(data.pagination);

                var str4='';
                $.each(data1,function (index,obj) {

                    str4+="<TR>";
                    str4+="<TD class=house-thumb>";
                    str4+="<SPAN>";
                    str4+="<A href='house!searchHouse.action?hid="+obj.hid+"' target='_blank'>";
                    str4+="<img src='../images/thumb_house.gif' width='100' height='75' alt='图片加载失败'>";
                    str4+="</A>";
                    str4+="</SPAN>";
                    str4+="</TD>";
                    
                    str4+="<TD>";
                    str4+="<DL>";
                    str4+="<DT>";
                    str4+="<A href='house!searchHouse.action?hid="+obj.hid+"' target='_blank'>序号: "+obj.hid+'==='+obj.htitle+"</A>";
                    str4+="</DT>";
                    str4+="<DD>"+obj.street.district.dname+obj.street.sname+","+obj.hfloorage+"平米<BR>联系方式："+obj.hcontact+" </DD>";
                    str4+="</DL>";
                    str4+="</TD>";

                    str4+="<TD class=house-type>";
                    str4+="<LABEL class=ui-green>";
                    str4+="<INPUT type=button value='修    改'  onclick=click2UpdateHouse("+obj.hid+")>";
                    str4+="</LABEL>";
                    str4+="</TD>";

                    str4+="<TD class=house-price>";
                    str4+="<LABEL class=ui-green>";
                    str4+="<INPUT type=button value='删    除' onclick=click2DeleteHouse("+obj.hid+")>";
                    str4+="</LABEL>";
                    str4+="</TD>";

                    str4+="</TR>";
                    
                });
                $("tbody").empty();
                $("tbody").append(str4);
            }
        });
    }

    /**
     * 房屋类型的下拉列表
     */
    selectType();
    function selectType(){
        console.log('111房屋类型的下拉列表');
        $.ajax({
            type:'post',
            url:'type!typeList.action',
            dataType:'json',
            success:function (data) {
                var str1='<option value=0>房屋类型不限</option>';
                $.each(data,function (index,obj) {
                    str1+='<option value='+obj.tid+'>'+obj.tname+obj.tid+'</option>';
                });
                $("select[name='type.tid']").empty();
                $("select[name='type.tid']").append(str1);
                /* console.log($("select[name='type.tid']").html());*/
            }
        });
    }

    /**
     * 区县的下拉列表
     */
    selectDistrict();
    function  selectDistrict() {
        console.log('222区县的下拉列表');
        $.ajax({
            type:'post',
            url:'district!districtList.action',
            dataType:'json',
            success:function (data) {
                var str2='<option value=0>区县不限</option>';
                $.each(data,function (index,obj) {
                    str2+='<option value='+obj.did+'>'+obj.dname+obj.did+'</option>';
                });
                $("select[name='street.district.did']").empty();
                $("select[name='street.district.did']").append(str2);
                /* console.log($("select[name='street.district.did']").html());*/
            }
        });
    }

    /**
     * 街道的下拉列表
     */
    var did2str=-1;
    selectStreet();
    function selectStreet(){
        console.log('333街道的下拉列表');
        console.log('333====='+did2str);
        $.ajax({
            type:'post',
            url:'street!streetList.action',
            data:{
                sid:did2str/*实际是did,无法直接使用did的模型驱动*/
            },
            dataType:'json',
            success:function (data) {
                var str3='<option value=0>街道不限</option>';
                $.each(data,function (index,obj) {
                    str3+='<option value='+obj.sid+'>'+obj.sname+obj.sid+'|||'+obj.district.dname+obj.district.did+'</option>';
                    /*str3+='<option value='+obj.sid+'>'+obj.sname+'</option>';*/
                });
                $("select[name='street.sid']").empty();
                $("select[name='street.sid']").append(str3);
                /* console.log($("select[name='street.sid']").html());*/
            }
        });
    }

    /**
     * select-option的属性selected=selected
     */
    $(function () {
        console.log('444区县和街道的下拉列表的级联');
        $("select[name='street.district.did']").live('click',function () {
            console.log('444111');
            var did2val=$("select[name='street.district.did']").val();
            $("select[name='street.district.did'] option[value!="+did2val+"]").removeAttr('selected');
            $("select[name='street.district.did'] option[value="+did2val+"]").attr('selected','selected');
            did2str=$("select[name='street.district.did'] option[selected=selected]").val();
            selectStreet();
        });
    });

    /**
     *
     */
    var hid2updte1=-1;

    function click2UpdateHouse(hid2update) {
        console.log('999点击了更新事件');
        console.log('hid2update====='+hid2update);
        $.ajax({
            type:'post',
            url:'house!searchHouse.action',
            data:{
                operater:'updateHouse',
                hid:hid2update/*该处的变量是var 处的引用变量*/
            },
        });

    }



</script>

